<template>
  <div>
    <my-header-1></my-header-1>
    <div>
      <input
        type="text"
        placeholder="请输入手机号:13412341234"
        v-model="tele"
        class="tele"
      />
      <span class="yanzheng" :style={color:checkcol} @click="getcheck">发送验证码</span>
    </div>
    <div>
      <input
        type="password"
        placeholder="请输入短信验证码:1234"
        v-model="check"
        class="check"
      />
      <button @click="log" :style="{color:this.btncol,background:this.btnsty}">登录</button>
       <br>  <p class="rad"><input
        type="radio" 
        
      />我已阅读并同意 <span class="red">《猫眼用户服务协议》《隐私政策》</span></p>
      <p>客服电话：<span class="red">1010-5335</span> </p>
    </div>
    <p class="weizuce">未注册的手机号将自动生成新账号</p>
  </div>
</template>

<script>
import MyHeader1 from "../../../components/MyHeader1.vue";
export default {
  components: { MyHeader1 },
  // eslint-disable-next-line vue/multi-word-component-names
  name: "login",

  data() {
    return {
      tele: "",
      check: "",
      btnsty:'',
      btncol:'',
      checkcol:'',
      flag: 1,
    };
  },
  methods: {
    log() {
      if (this.tele == "13412341234" && this.check == "1234") {
        this.$router.push({ path: "/me", name: "me", params: { flag: true } });
      } else {
        alert("请输入正确的信息并勾选同意");
      }
    },
    getcheck(){
      this.flag = 0
      this.checkcol ='#df2d2d'
      console.log("aaa")
    }
  },
  updated() {
    console.log(this.tele.length);
    if(this.tele.length >= 11 && this.check.length>=4){
      this.btnsty ='#df2d2d'
      this.btncol = '#fff'
    }else{
      this.btnsty='#e5e5e5'
      this.btncol = '#999'
    }
    if(this.tele.length>=11 && this.flag){
      this.checkcol ='#df2d2d'
    }else{
      this.checkcol = '#ccc'
    }
  },
};
</script>

<style lang="less" scoped>
input {
  border: 0;
  outline: 0;
  background: #fff;
  
}
input::placeholder{
    color: #ccc;
    font-size: 16px;
  }
.tele {
  padding-left: 20px;
  width: 60%;
  height: 42px;
  margin-top: 60px;
}
.yanzheng {
  width: 40%;
  color: #ccc;
  font-size: 16px;
}
button{
  width: 90%;
  margin-left: 5%;
  height: 44px;
  border-radius: 22px;
  background: #e5e5e5;
  border: none;
  font-size: 16px;
  color: #999;
}
.check {
  padding-left: 20px;
  width: 100%;
  height: 42px;
}
p{text-align: center; font-size: 13px;}
.rad{
  margin-top: 40px;
  padding-bottom: 10px;
}
.red{
  color: #df2d2d;
}
.weizuce{
  margin-top: 20px;
  color: #999999;
}
</style>